//引入组件
import React,{ Component } from 'react'

import PropTypes from 'prop-types'

import { nanoid } from 'nanoid'

import './index.css'

export default class Header extends Component{
    // 进行参数的检验
    static propTypes = {
        addTodo:PropTypes.func.isRequired
    }

    // handelKeyUp
    handelKeyUp = (event) =>{
        const { keyCode,target } = event
        // 判断是否为回车键
        if(keyCode !== 13) return;
        // 判断输入是否为空
        if(target.value.trim() === ''){
            alert("您输入的内容为空")
            return;
        }

        // 准备一个todo对象
        const todoObj = {id:nanoid(),name:target.value,isDone:false}
        // 将todos传给App
        this.props.addTodo(todoObj)
        // 清空输入的值
        target.value = ''
    }

    render(){
        return(
            <div className="header">
				<input type="text" onKeyUp={ this.handelKeyUp } placeholder="请输入相关的内容" />
			</div>
        )
    }
}